<template>
  <div class="dc-section"
    :id="'dc-section_' + name">
    <!-- <h2 class="dc-section-title dc-section-title_icon"
      v-if="title.length > 0"><i class="iconfont" :class="`icon-${name}`"></i>{{title}}</h2> -->
    <h2 class="dc-section1-title dc-section-title_icon"
     :class="{weight: weight}"
      v-if="title.length > 0">{{title}}</h2>
    <span class="section-tip">{{tips}}</span>
    <div class="dc-section1-body">
      <slot name="body"></slot>
    </div>
  </div>
</template>
<script>
export default {
  componentName: 'section',
  props: {
    name: {
      type: String,
      required: true
    },
    title: {
      type: String,
      default: ''
    },
    tips: {
      type: String,
      default: ''
    },
    weight: {
      type: Boolean,
      default () {
        return false
      }
    }
  }
}

</script>
<style lang="less">

.dc-section + .dc-section{
  margin-top: 0px;
}
.dc-section {
  margin-bottom: 40px;
  margin-top: 30px;
  &-title {
    display: inline-block;
    line-height: 20px;
    font-weight: normal;
    font-size: 16px;
    color: #212121;
    letter-spacing: 0.5;
    &.weight{
      font-weight: bolder;
    }
    .iconfont {
      margin-right: 4px;
      font-size: 24px;
      color: #999;
      vertical-align: text-bottom;
    }
  }
  .section-tip {
    font-size: 14px;
    color: #999999;
    text-align: left;
    line-height: 18px;
  }
  &-body {
    background-color: #fff;
    border-radius: 4px;
  }
}

</style>
